     <template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
    >
        <el-form
            :inline="false"
            :model="addForm"
            size="mini"
            class="demo-form-inline"
            label-width="120px"
            :rules="dataRule"
            ref="ruleForm"
        >
            <el-form-item label="按钮名称" prop="name">
                <el-input v-model="addForm.name" placeholder="请输入按钮名称"></el-input>
            </el-form-item>
            <el-form-item label="接口地址">
                <el-input v-model="addForm.url" placeholder="请输入接口地址"></el-input>
            </el-form-item>
            <el-form-item label="按钮标识" prop="funcMark">
                <el-input v-model="addForm.funcMark" placeholder="请输入按钮标识"></el-input>
                <span style="font-size:12px;color:red;padding-top:10px;">规则：新增用add，编辑用edit，查询用query，删除用del，其他自定义</span>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="addForm.type" placeholder="请选择" style="width:100%">
                    <el-option label="按钮" value="btn"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="addForm.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="上级按钮" prop="pid">
                <el-select v-model="addForm.pid" placeholder="请选择" style="width:100%">
                    <!-- <el-option label="master" value="直属"></el-option> -->
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="item in btndDataList"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button @click="dialogVisible = false" style="padding:10px 40px">取 消</el-button>
                <el-button
                    type="primary"
                    style="padding:10px 40px"
                    @click="addAndEditSubmit('ruleForm')"
                >保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script type="text/ecmascript-6">
import API from '@/api';
export default {
    data() {
        var validateUrl = (rule, value, callback) => {
            if (this.dataForm.type === 1 && !/\S/.test(value)) {
                callback(new Error('URL不能为空'));
            } else {
                callback();
            }
        };
        return {
            btndDataList: [],
            dialogVisible: false,
            dialogTitle: '新增',
            addForm: {
                appId: '',
                funcMark: '',
                id: '',
                status: 1,
                pageId: '',
                name: '',
                url: '',
                pid: '',
                type:'btn',
                appType:''
            },
            type: 1,
            dataRule: {
                name: [{ required: true, message: '按钮名称不能为空', trigger: 'blur' }],
                funcMark: [{ required: true, message: '按钮标识不能为空', trigger: 'blur' }],
                url: [{ validator: validateUrl, trigger: 'blur', required: true }]
            }
        };
    },
    methods: {
        handleClose() {
            this.clearForm();
            this.dialogVisible = false;
        },
        init(item, appId, pageId,appType) {
            this.dialogVisible = true;
            this.getBtnList(pageId, appId);
            if (item) {
                this.addForm = {
                    appId: item.appId,
                    funcMark: item.funcMark,
                    id: item.id,
                    pid: item.pid,
                    status: item.status,
                    pageId: item.pageId,
                    name: item.name,
                    url: item.url,
                    type:item.type
                };
                this.type = 2; //编辑
                this.dialogTitle = '编辑';
            } else {
                this.type = 1; // 新增
                this.dialogTitle = '新增';
                this.addForm['appId'] = appId;
                this.addForm['pageId'] = pageId;
            }
            this.addForm['appType'] = appType
        },
        // 获取上级按钮列表
        getBtnList(pageId, appId) {
            let params = {
                pageNum: 1,
                pageSize: 1000,
                pageId: pageId,
                appId: appId
            };
            API.menu.getMenuBtnList(params).then(res => {
                this.btndDataList = res.data.rows;
               
            });
        },
        // 清空新增中的数据
        clearForm() {
            this.addForm = {
                appId: '',
                funcMark: '',
                id: '',
                pid: 0,
                status: 1,
                pageId: '',
                name: '',
                url: '',
                pid: ''
            };
        },
        // 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 新增
                    if (this.type == 1) {
                        API.menu.addMenuList(this.addForm).then(res => {
                            if (res.code == 20000000) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功'
                                });
                                this.clearForm();
                                this.$emit('refreshDataList');
                                this.dialogVisible = false;
                            } else {
                                console.log('你不进？')
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        // 编辑
                        API.menu.editMenuList(this.addForm).then(res => {
                            if (res.code == 20000000) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功'
                                });
                                this.clearForm();
                                this.$emit('refreshDataList');
                                this.dialogVisible = false;
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>